<template>
    <view class="container">
        <view class="point-info">
            <u-icon
                name="/static/point.png"
                width="37rpx"
                height="37rpx"
            ></u-icon>
            <view class="point-text">总积分</view>
            <view class="point-num">{{ userPoint }}</view>
        </view>
        <view class="line"></view>
        <view class="point-ul">
            <view class="point-li" v-for="(item, k) in tableData" :key="k">
                <view class="title">{{ item.description }}</view>
                <view class="time">{{ item.createAt }}</view>
                <view class="num" v-if="item.point > 0">+{{ item.point }}</view>
                <view class="num" v-else>{{ item.point }}</view>
            </view>
        </view>
    </view>
</template>
<script>
import {getPointLog} from "@/config/api"
export default {
    data(){
        return {
            query: {
                page: 1,
                list_rows: 15
            },
            total: 0,
            tableData: []
        }
    },
    onLoad() {
        this.getData()
    },
    computed: {
        userPoint() {
            return this.$store.getters.userPoint
        }
    },
    onReachBottom() {
        if (this.total > this.tableData.length) {
            this.query.page += 1
            this.getData(true)
        }
    },
    methods: {
        async getData(more = false) {
            const res = await getPointLog(this.query)
            if (more) {
                this.tableData = [...this.tableData, ...res.items]
            } else {
                this.tableData = res.items
            }
            this.total = res.total
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        .point-info {
            display: flex;
            align-items: center;
            padding-left: 26rpx;
            .point-text {
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                margin-left: 5rpx;
            }
            .point-num {
                font-size: 42rpx;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #353CE7;
                margin-left: 9rpx;
            }
        }
        .line {
            height: 1px;
            background: #D8D8D8;
            margin: 40rpx 0;
        }
        .point-ul {
            padding: 0rpx 26rpx 10rpx 26rpx;
            .point-li {
                position: relative;
                margin-top: 50rpx;
                .title {
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                }
                .time {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #888888;
                    margin-top: 10rpx;
                }
                .num {
                    position: absolute;
                    right: 0;
                    top: 5rpx;
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #3642FF;
                }
            }
        }
    }
</style>
